<section id="tooltip"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Tooltip</h2>
    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-wrap items-center gap-4">
      <button type="button" class="btn-outline" data-tooltip="Top tooltip">
        Top
      </button>
      <button type="button" class="btn-outline" data-tooltip="Right tooltip" data-side="right">
        Right
      </button>
      <button type="button" class="btn-outline" data-tooltip="Bottom tooltip" data-side="bottom">
        Bottom
      </button>
      <button type="button" class="btn-outline" data-tooltip="Left tooltip" data-side="left">
        Left
      </button>
    </div>
  </div>
</section>